<template>
    <dv-full-screen-container class="box-content">
        <dv-border-box-11 class="box-title" title="直播大屏">
            <div class="content">
                <div class="left">
                    <div class=leftBiao>
                        <p>实时直播</p>
                        <dv-decoration-5 class="kuang"/>
                    </div>
                    <dv-border-box-1 class="leftCent">
                        <!-- 整体嵌入更换链接 -->
                        <iframe :src="liveName.play_link" class="qianru" ref="liveIframe" scrolling="no" allowFullScreen></iframe>
                    </dv-border-box-1>
                    <!-- <dv-decoration-3 style="width:430px;height:30px;" /> -->
                    <!-- <dv-decoration-3 style="width:430px;height:30px;" /> -->
                </div>
                <div class="middle">
                    <div class="middleTop">
                        <dv-border-box-8 class="tongji">
                            <div class="t_top">
                                <div class="title">计划目标累计完成情况</div>
                                <div class="danliang">
                                    <div class="bfb">
                                        <dv-digital-flop :config="rental" style="height:100px;" />
                                        <div class="yuanpan">
                                            <dv-decoration-9
                                                :color="['#18eebe', '#18eebe']"
                                                style="width:200px;height:200px;text-align: center;display: block;"
                                                :dur="6"
                                            >
                                                <div class="dv" style="color:#19f2d7;font-weight: bold;line-height: 200px;">{{ orderB }}%</div>
                                            </dv-decoration-9>
                                        </div>
                                    </div>
                                    <div class="bfb">
                                        <dv-digital-flop :config="renPrice" style="height:100px;" />
                                        <div class="yuanpan">
                                            <dv-decoration-9
                                                :color="['#18eebe', '#18eebe']"
                                                style="width:200px;height:200px;text-align: center;display: block;"
                                                :dur="6"
                                            >
                                                <div class="dv" style="color:#19f2d7;font-weight: bold;line-height: 200px;">{{ schedule }}%</div>
                                            </dv-decoration-9>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </dv-border-box-8>
                    </div>
                    <div class="middleBoom">
                        <dv-scroll-ranking-board :config="paihang" style="width:100%;height:100%" />
                    </div>
                </div>
                <div class="right">
                    <div class="jiangli">
                        <div class="xstop">销售TOP榜</div>
                        <div class="bangdan">
                            <div class="hez hleft">
                                <img v-if="marketList.length >= 2" class="toux" :src="marketList[1].avatar" alt="">
                                <img class="toeImg1" src="https://shop.facejuva.com/uploads/attach/2024/12/20241204/36ed755cd33df14320469dee44424f87.png" alt="">
                            </div>
                            <div class="hez hzhong">
                                <img v-if="marketList.length >= 1" class="toux" :src="marketList[0].avatar" alt="">
                                <img class="toeImg2" src="https://shop.facejuva.com/uploads/attach/2024/12/20241204/87f3d330e7ea8d36767f5bfc014ec49f.png" alt="">
                            </div>
                            <div class="hez hright">
                                <img v-if="marketList.length >= 3" class="toux" :src="marketList[2].avatar" alt="">
                                <img class="toeImg3" src="https://shop.facejuva.com/uploads/attach/2024/12/20241204/051166fcf89039aa4890d71c576aced3.png" alt="">
                            </div>
                        </div>
                        <img class="image" src="https://shop.facejuva.com/uploads/attach/2024/12/20241204/3690b468893beceb625ee6beda106e32.png" alt="">
                    </div>
                    <dv-scroll-board :config="tabulate" class="paiming"/>
                </div>
            </div>
            <!-- <button @click="broadcast(6666)">语音播报</button> -->
        </dv-border-box-11>
    </dv-full-screen-container>
</template>

<script>
    import { statisticProductListApi} from '@/api/statistic'
    import { getSaleRanking,getStatistics,liveDetail} from '@/api/cloudlive'
    const synth = window.speechSynthesis
    const msg = new window.SpeechSynthesisUtterance()
    import { adminSocket } from "@/libs/socket";
    import util from "@/libs/util";
    export default{
        data(){
            return{
                rental:{
                    number:[0],//初始数据
                    content:'{nt}单',
                    style: {
                        //这里可以修改默认样式
                        fontSize: 60,//字体大小
                        fill: '#58A1FF',//字体颜色
                        fontWeight: 'bold',
                        textAlign: 'center',
                    }
                },
                renPrice:{
                    number:[0],//初始数据
                    toFixed: 2,
                    content:'{nt}元',
                    style: {
                        //这里可以修改默认样式
                        fontSize: 60,//字体大小
                        fill: '#58A1FF',//字体颜色
                        fontWeight: 'bold',
                        textAlign: 'center',
                    }
                },
                schedule: 0,
                orderB: 0,
                tabulate:{
                    header: [ '排名','姓名', '成交单数','成交金额'],
                    data: [],
                    align: ['center','center','center','center'],
                    indexHeader: "序号",
                    oddRowBGC: "", // 奇数行背景色
                    evenRowBGC: "", // 偶数行背景色
                    headerBGC: "#82c1f5", // 表头背景色
                    rowNum: 10, // 表行数
                    columnWidth: [80,120,120,120],
                    waitTime: 2000, // 轮播时间间隔(ms)
                },
                messages: [], // 用于存储接收到的消息
                socket: null, // WebSocket实例
                paihang:{
                    rowNum: 10,
                    waitTime:"2000",
                    sort: false,
                    unit: '单',
                    data: []
                },
                dataArray: [1, 2, 3, 4], // 这里模拟一个数组数据，实际可替换为真实业务数据
                isAnimating: false, // 用于控制是否正在动画的标识
                messageList: [],
                formValidate: {
                    limit: 10,
                    page: 1,
                    sort: 'pay',
                    room_id:""
                },
                roomId:"",
                marketList:[],
                targetOrders: 100, //目标订单
                targetAmount: 100, //目标金额
                liveName:"",
                timer: null
            }
        },
        mounted() {
            this.formValidate.room_id = this.$route.query.id;
            let _this = this;
            // _this.timer = setInterval( ()=>{
            //     _this.getList()
            // },10000);
            this.getList()
            this.pageWs = adminSocket(true, util.cookies.get("token"));
            this.wsStart();
            this.getLiveDetail()
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer);
            }
            // 在组件销毁前关闭WebSocket连接
            if (this.socket) {
                this.socket.close();
            }
        },
        methods: {
            wsStart() {
                this.pageWs
                    .then((ws) => {
                    let that = this;
                    ws.send({
                        type: "login",
                        data: util.cookies.get("token"),
                    });
                    ws.$on("NEW_ORDER", function (data) {
                        let text = "您有一个新的订单(" + data.order_id + "),请注意查看"
                        that.$Notice.info({
                            title: "新订单",
                            duration: 8,
                            desc: "您有一个新的订单(" + data.order_id + "),请注意查看",
                        });
                        that.debounceGetList();
                        that.broadcast(text);
                    });
                    ws.$on("NEW_REFUND_ORDER", function (data) {
                        let text = "您有一个订单(" + data.order_id + ")申请退款,请注意查看"
                        that.$Notice.warning({
                            title: "退款订单提醒",
                            duration: 8,
                            desc: `您有一个订单（${data.order_id}）申请退款，请注意查看`,
                        });
                    });
                    ws.$on("STORE_STOCK", function (data) {
                        that.$Notice.warning({
                        title: "库存预警",
                        duration: 8,
                        desc: "(" + data.id + ")商品库存不足,请注意查看",
                        });
                    });
                    ws.$on("timeout", (data) => {
                        setTimeout(() => {
                            this.wsRestart();
                        }, 1000);
                    });
                    })
                    .catch((error) => {
                        setTimeout(() => {
                            this.wsRestart();
                        }, 1000);
                    });
            },
            // 自己实现的简单防抖函数
            debounceGetList() {
                let that = this
                if (that.timer) {
                    clearTimeout(that.timer);
                }
                that.timer = setTimeout(() => {
                    that.getList();
                    that.timer = null;
                }, 2000); // 延迟时间 1000 毫秒，可按需调整
            },
            getLiveDetail(){
                let that = this,
                    room_id = this.formValidate.room_id
                liveDetail(room_id).then(async res =>{
                    that.liveName = res.data
                }).catch(res =>{
                    that.$Message.error(res.msg);
                })
            },
            wsRestart() {
                this.pageWs = adminSocket(true, util.cookies.get("token"));
                this.wsStart();
            },
            broadcast(text){
                let speechInstance = new SpeechSynthesisUtterance(text);
                speechInstance.lang = 'zh-CN';
                speechInstance.volume = 1;
                speechInstance.rate = 1;
                speechInstance.pitch = 1;
                speechSynthesis.speak(speechInstance).then(() => {
                    // 语音播放结束后，提示用户恢复音量
                    window.confirm('语音提示已播放完毕，是否恢复系统音量？');
                }).catch((error) => {
                    console.error('语音合成播放出错:', error);
                });
                // const msg = new SpeechSynthesisUtterance();
                // console.log(msg, "可用的语音列表");
                // msg.text = `您有一个新订单${data.order_id}，请注意查看`;
                // msg.lang = 'zh-CN';
                // msg.volume = 1;
                // msg.rate = 1;s
                // msg.pitch = 1;
                // synth.speak(msg)
            },
            getList () {
                // 订单排行
                let that = this,
                    room_id = that.formValidate.room_id
                statisticProductListApi(that.formValidate).then(async res => {
                    let data = res.data.list;
                    let newArray = data.map(item => ({
                        name: item.store_name,
                        value: item.pay
                    }));
                    that.paihang.data = newArray
                    that.paihang = { ...that.paihang };

                }).catch(res => {
                    that.$Message.error(res.msg);
                })
               
                getStatistics({room_id:room_id}).then(async res =>{
                    let cent = res.data
                    that.renPrice.number[0] = Number(cent.total_pay_prcie);
                    that.renPrice=  {...that.renPrice};
                    that.rental.number[0] = Number(cent.total_pay_num);
                    that.rental=  {...that.rental};
                    that.orderB = Number(res.data.percent_pay_num)*100;
                    that.schedule = Number(res.data.percent_pay_price)*100;
                }).catch(res =>{
                    that.$Message.error(res.msg);
                })
                 getSaleRanking({room_id:room_id}).then(async res =>{
                    console.log(res.data,"123")
                    let list = res.data
                    const newArray = list.map((item, index) => [(index + 1).toString(), item.real_name, item.sale_num.toString(), item.sale_price.toString()]);
                    that.tabulate.data = newArray
                    that.tabulate=  {...this.tabulate};
                    that.marketList = list
                }).catch(res =>{
                    that.$Message.error(res.msg);
                })
            },
        },
    }
</script>


<style scoped lang="stylus">
.box-content{
    background: url("https://shop.facejuva.com/uploads/attach/2024/12/20241202/8acf37b4f94a228bf6bd7651b2fac86d.png") no-repeat;
    background-size: 100% 100%;
    .box-title{
        font-size: 24px;
        padding: 30px 20px;
        box-sizing: border-box;
        .content{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .left{
                width: 460px;
                .leftBiao{
                    text-align: center;
                    color: #fff;
                    font-weight: bold;
                    p{
                        line-height: 50px;
                    }
                    .kuang{
                        width: 300px;
                        height: 50px;
                        margin: -26px auto;
                    }

                }
                .leftCent{
                    margin-top: 20px;
                    height: 944px;
                    margin-bottom: 20px;
                    .qianru{
                        margin-left: 18px;
                        margin-top: 20px;
                        width: 420px;
                        height: 900px;
                        overflow:hidden;
                    }
                }
            }
            .middle{
                width: 52%;
                height: 700px;
                margin-top: 30px;
                margin-left: -16px;
                .middleTop{
                    /* display: flex;
                    justify-content: space-between; */
                    margin-bottom: 10px;
                    .tongji{
                        width: 100%;
                        height: 430px;
                        padding: 20px 0 30px 0;
                        background: rgba(7, 36, 116, 0.5);
                        .t_top{
                            margin-bottom: 20px;
                            .title{
                                color: #fff;
                                font-size: 42px;
                                text-align: center;
                                margin-bottom: 10px;
                                font-weight: bold;
                            }
                            .danliang{
                                display: flex;
                            }
                            .jine{
                                color: #ffffff;
                                font-size: 16px;
                                display: flex;
                                justify-content: center;
                            }
                        }
                        .bfb{
                            width: 50%;
                            .yuanpan{
                                display: flex;
                                justify-content: center;
                            }
                        }
                    }
                }
                .middleBoom{
                    width: 100%;
                    height: calc(100vh - 540px);
                    color: #fff;
                    // background: #fff;
                }
            }
            .right{
                height: calc(100vh - 80px);
                padding: 10px 0;
                width: 420px;
                /* background: rgba(7, 36, 116, 0.5); */
                .jiangli{
                    width: 100%;
                    height: 320px;
                    position: relative;
                    .xstop{
                        text-align: center;
                        font-weight: bold;
                        font-size: 30px;
                        color: #fff;
                        padding: 10px 0;
                    }
                    .image{
                        position: absolute;
                        top: 130px;
                        width: 100%;
                        height: 400px;
                        z-index: -1;
                    }
                    .bangdan{
                        display: flex;
                        justify-content: space-between;
                    }
                    .hez{
                        margin-top: 40px;
                        width: 120px;
                        height: 120px;
                        position: relative
                        /* background: #fff; */
                    }
                    .toeImg1{
                        position: absolute;
                        top: -45px;
                        left: 10px;
                        width: 100px;
                        height: 76px;
                    }
                    .toeImg2{
                        position: absolute;
                        top: -47px;
                        left: 8px;
                        width: 102px;
                        height: 75px;
                    }
                    .toeImg3{
                        position: absolute;
                        top: -44px;
                        left: 11px;
                        width: 97px;
                        height: 72px;
                    }
                    .hleft{
                        margin-left: 6px;
                    }
                    .hzhong{
                        margin-left: 16px;
                    }
                    .hez:nth-child(2n+1){
                        margin-top: 100px;
                    }
                    .toux{
                        width: 90px;
                        height: 90px;
                        border-radius: 90px;
                        margin: auto;
                    }
                }
                .paiming{
                    width: 100%;
                    height: calc(100vh - 400px);
                }
            }
        }
    }

}
</style>